<template>
  <div class="rightpanel">
    <div class="top">
      <activity-distribution></activity-distribution>
      <activity-participation></activity-participation>
    </div>
    <div class="bottom">
      <activity-photos></activity-photos>
      <activity-personnel></activity-personnel>
    </div>
  </div>
</template>
<script setup>
import ActivityDistribution from '../components/ActivityDistribution.vue'
import ActivityParticipation from '../components/ActivityParticipation.vue'
import ActivityPhotos from '../components/ActivityPhotos.vue'
import ActivityPersonnel from '../components/ActivityPersonnel.vue'
</script>
<style scoped lang="scss">
.rightpanel {
  .top,
  .bottom {
    display: flex;
    justify-content: space-between;
  }
  .top {
    margin-bottom: 15px;
  }
}
</style>
